<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .page span {
      display: inline-block;
      padding: 0 10px;
      cursor: pointer;
    }

    .page span.on {
      color: red;
    }
  </style>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>

</head>

<body>
  <div id="app">
    <h2>{{name}}</h2>
    <ml-a :page="page" @change="chagePage"></ml-a>
  </div>
  <script>
    // 在有些情况下，使用$attrs和$listeners 比props和$emit更好用
    // $attrs   接收父传递过来的自定义属性
    // $listeners   可以接收父传递过来的自定义事件
    Vue.component("ml-a", {
      template: `
        <div class="page">
            <div>我是ml-a组件</div>
            <span @click='$listeners.change(i)' :class="{on:$attrs.page == i}" v-for="i in pageArr" v-text="i"></span>
        </div>
      `,
      computed: {
        pageArr() {
          let p = this.$attrs.page
          if (p <= 3) {
            return [1, 2, 3, 4, 5]
          } else {
            return [p - 2, p - 1, p, p + 1, p + 2]
          }
        }
      }
    })
    let vm = new Vue({
      el: "#app",
      data() {
        return {
          name: "码路",
          page: 1
        }
      },
      methods: {
        chagePage(val) {
          this.page = val || 1;
        }
      },
    });
  </script>
</body>

</html>